import React, { useState } from "react";
import { Button, Modal, Form } from 'antd';
import { PlusOutlined } from '@ant-design/icons';

import { lableList } from "@/utils/options";

import FndSelectItem from "./selectItem";

const Selectbox = (
    {
        visible,
        setVisible,
        setCondition
    }
) => {
    const [form] = Form.useForm();     // 表单
    // 表单完成事件
    const onFinish = (values) => {
        // console.log('筛选查询条件：\n', values.query);
        var list = (values.query).reverse()
        // 为了在去重的时候保留后面选择的选项，要把数组倒序一下

        // console.log("过滤下数据：\n", list)
        var newList = [];
        list.filter(item => newList.push(JSON.stringify(item)));

        // console.log('拿到的待去重的数据：\n', newList, '\n去重一下：\n', new Set([...newList]))
        newList = Array.from(new Set([...newList]))
        // console.log("最终数组：\n", Array.from(new Set([...newList])))
        var tempList = [];
        for (var i = 0; i < newList.length; i++) {
            tempList.push(JSON.parse(newList[i]))
        }
        console.log(tempList)
        setCondition(tempList);//设置条件

        setVisible(false);//关闭窗口
    };



    // 清空重置条件
    const clearCondition = () => {
        form.resetFields()//重置
    }

    // 确认提交
    const sumbit = () => {
        form.submit()
        // setVisible(false)
    }

    return (
        <>
            {/* 筛选框 */}
            <Modal
                title="条件筛选"
                centered
                open={visible}
                onCancel={() => setVisible(false)}
                width={700}
                footer={[
                    <Button key="back" onClick={clearCondition}>
                        清空条件
                    </Button>,
                    <Button key="submit" type="primary" onClick={sumbit}>
                        应用
                    </Button>
                ]}
            >
                <Form
                    form={form} name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
                    <Form.List name="query">
                        {(fields, { add, remove }) => (
                            <>
                                {fields.map(({ key, name, ...restField }) => (

                                    <FndSelectItem key={key} remove={remove} form={form} name={name} restField={restField} />

                                ))}
                                <Form.Item>
                                    <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                                        新增条件
                                    </Button>
                                </Form.Item>
                            </>
                        )}
                    </Form.List>

                </Form>
            </Modal>
        </>
    )
}
export default Selectbox